<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 正则表达式：

        // 正则匹配：
        let str = "sdigo-1267fh34567ju-567890sret";
        //console.log(str.match(/[aoeiu]/)); // 匹配一个元音字母
        //console.log(str.match(/[aoeiu]/g)); // 匹配所有的元音字母
        //console.log(str.match(/[0-9]{4}/)); // 匹配任意4位数字
        //console.log(str.match(/[0-9]{4}/g)); // 匹配所有任意4位数字
        //console.log(str.match(/[0-9]{4,}/g)); // 匹配所有至少4位数字
        console.log(str.match(/-{0,1}[0-9]{4,}/g)); // 匹配所有至少4位数字

        /*
        [aoeiu]  表示aoeiu中任意一个字母
        [123] 表示的是1或2或3
        [0123456789] 或 [0-9]  表示任意一位数值0~9
        [0-9][0-9]  表示任意二位数值0~9
        [a-z] 表示任意一位小写字母
        [a-zA-Z] 表示任意一位大小写字母
        [a-z][a-z] 表示任意两位小写字母
        [0-9][0-9][0-9][0-9]  表示任意4位数字
        [0-9]{4}  表示任意4位数字
        [0-9]{4,8}  表示任意4~8位数字
        [0-9]{4,}  表示任意至少4位的数字

        [0-9]{1,} 或 [0-9]+ 表示至少1位的数值( 其中 + 等价于 {1,}  )
        [0-9]{0,} 或 [0-9]* 表示任意位数值 (其中 * 等价于 {0,} )
        -{0,1}[0-9]{1,} 表示任意整数（正整数、 0 和 负整数）
        -?[0-9]+ 表示任意整数（正整数、 0 和 负整数）(其中 ? 等价于 {0,1} )
        
        [0-9] 表示任意一位0~9的数值
        [^0-9] 表示任意一位非0~9的数值

        . 表示任意一位字符（除换行符）
    
        */

        // 1. 字串拆分（精确处理）
        // let s1 = "12:34:56:78"; 
        // // 使用冒号将上面字串拆成数组
        // console.log(s1.split(":")); // ['12', '34', '56', '78']

        //2. 正则拆分（模糊处理）
        let s2 = "23:45;67#89&76*54";
        // 将上面字串中的数值分离出来，形成数组
        console.log(s2.split(/[^0-9]/));

        //3. 字串替换 （精确替换）
        let s3 = "zhangsan@163.com";
        // 将字串中的zhangsan替换成lisi
        console.log(s3.replace("zhangsan","lisi"));

        //4 正则替换
        let s4 = "wqe123rty55667uil789kjhsart";
        // 将字串中的数值替换掉（去除）
        console.log(s4.replace(/[0-9]{1,}/g, ""));
    

    </script>

    <h2>表单验证</h2>
    <form action="a.html">
        账号：<input type="text" name="uname" onblur="checkName()" /> 8~16为的有效字符<br/><br/>
        电话：<input type="text" name="tel" /> <br/><br/>
        <input type="submit">
    </form>
    
    <script>

        const form = document.querySelector("form");

        form.onsubmit = function(){
           return checkName() && checkTel();
        }

        //验证账号
        function checkName(){
            let uname = form.uname.value;
            let reg = new RegExp("^[0-9a-zA-Z_]{8,16}$");
            //let reg = new RegExp("^[0-9]$");
            if(reg.test(uname)){
                return true;
            }else{
                alert("账号错误！");
                return false;
            }
        }

        //验证电话
        function checkTel(){
            //...
            return true;
        }

    </script>
</body>
</html>